<script setup>
import { ref, reactive } from 'vue'
const options = ref([])
const formState = reactive({
    goods_name: '',
    goods_info: []
})
const handleChange = (value) => {
    // console.log(`selected ${value}`);
    console.log(formState.goods_info, 'goods_infogoods_infogoods_info');

}
defineExpose({
    formState
})
</script>

<template>
    <div class="selectGoods">

        <div class="left_content_item">
            <!-- 分组标题 -->
            <span class="left_content_item_title">
                商品名称
                <span class="red_dian"></span>
            </span>
            <!-- 商品信息 -->
            <div class="left_content_item_main">
                <a-input v-model:value="formState.goods_name" placeholder="请输入产品名称,或抖音商品url链接、商品ID" />
            </div>
        </div>


        <div class="left_content_item">
            <!-- 分组标题 -->
            <span class="left_content_item_title">
                商品信息
                <span class="red_dian"></span>
            </span>
            <!-- 商品卖点 -->
            <div class="left_content_item_main">
                <!-- <a-textarea v-model:value="formState.goods_info" show-count :maxlength="40"
                    placeholder="请输入商品卖点,如 '饱和度高;不易脱妆',回车或输入分号;后生成卖点标 签,结构化、分段表达卖点效果更佳"
                    :auto-size="{ minRows: 2, maxRows: 5 }" /> -->
                <a-select v-model:value="formState.goods_info" mode="tags" :dropdownStyle="{ display: 'none' }"
                    style="width: 100%;" placeholder="请输入商品卖点" :options="options" @change="handleChange"></a-select>
            </div>
        </div>
    </div>
</template>



<style lang="less" scoped>
// :deep(.ss-select-selector) {
//     min-height: 100px;

//     .ss-select-selection-placeholder {
//         top: 30px;
//         white-space: inherit;
//     }

//     .ss-select-selection-overflow {
//         height: 100%;

//     }
// }

.selectGoods {
    @bgc: #f4f4f5;

    // 小红点
    .red_dian {
        display: inline-block;
        height: 4px;
        width: 4px;
        background: red;
        border-radius: 50%;
        overflow: hidden;
    }

    .left_content_item {
        margin-bottom: 20px;

        // 分组标题 公共样式
        .left_content_item_title {
            display: flex;
            align-items: center;
            gap: 3px;
            margin-bottom: 15px;
            font-weight: 600;
        }

        // 分组内容 公共样式
        .left_content_item_main {}
    }


}
</style>